<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-搜索列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css?a=00"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="main-box">
    <div class="search-bar collect-bar register-bar footprint-bar">
        <div class="search-title  search-red">
            <a href="javascript:;" class="sprite-icon icon-go-back"></a>

            <div class="search-box">
                <i class="sprite-icon search-icon"></i>
                <input type="text" class="search-input" placeholder="输入关键字搜索商品"/>
                <a href="javascript:;" class="link"><i class="sprite-icon icon-no"></i></a>
            </div>
            <a href="javascript:;" class="go-search">搜索</a>
        </div>
        <div class="search-list-cont">
            <div id="wrapper">
                <div id="scroller">
                    <!--无搜索结果时-->
                    <div class="pro-on"><span>暂无结果</span></div>
                    <!--猜你喜欢  标题-->
                    <div class="related-box list-row">
                        <!--没有搜索内容时显示“猜你喜欢”-->
                        <h2 class="related-line"><span>猜你喜欢</span></h2>
                        <!--有搜索结果时显示“列表菜单”-->
                        <div class="list-nav">
                            <div class=" list-row nav-cont">
                                <ul class="row-3">
                                    <li><a href="javascript:;" class="nav-item active">默认</a></li>
                                    <li><a href="javascript:;" class="nav-item">价格<i
                                            class="sprite-icon icon-up"></i></a></li>
                                    <li><a href="javascript:;" class="nav-item">热销</a></li>
                                </ul>
                                <div class="menu-line"></div>
                            </div>
                            <a id="listModal" href="javascript:;" class="list-change">
                                <i class="sprite-icon icon-list"></i>
                            </a>
                        </div>
                        <ul class="row-2 product-list">
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="pullUp">
                        <span class="pullUpLabel">加载更多...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll-probe.js"></script>
<script src="js/jquery.fly.min.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js?a=0000"></script>
<script>
    $(function () {
        var myScroll;
        myScroll = publicFuns.newIScrollRefresh("#wrapper", function () {
        }, loadFun, 0);

        //购物车抛物线
        $(".shopCar-icon").click(function (event) {
            event.stopPropagation();
            var _num = parseInt($(".car-btn").find("i").text());
            var _this = this;
            var img = $(_this).parents("li").find(".related-product img").attr("src");
            var flyer = $('<img class="fly-img" src="' + img + '">');
            publicFuns.shopFly(event, flyer, {
                left: $(_this).offset().left - 20,
                top: $(_this).offset().top - 50
            }, {
                left: $(window).width() / 2,
                top: $(window).height() - 10,
                width: 5,
                height: 5
            }, function () {
                _num++;
                $(".car-btn").find("i").text(_num);
            });
        });

        //加载数据方法
        function loadFun() {
            console.log("加载出新的数据显示到页面上。");
        }

        //菜单切换
        //初始化菜单底部的线条
        var $menuLine = $(".menu-line");
        $menuLine.css({
            "left": $("a.nav-item.active").get(0).offsetLeft,
            "width": $("a.nav-item.active").get(0).offsetWidth
        });
        $(".nav-cont").find("a").click(function () {
            if (!$(this).hasClass("active")) {
                $menuLine.animate({
                    "left": $(this).get(0).offsetLeft,
                    "width": $(this).get(0).offsetWidth
                }, 300);
            }

            if ($(this).hasClass("active")) {
                if ($(this).children().hasClass("icon-up")) {
                    $(this).children().toggleClass("active");
                    if ($(this).children().hasClass("active")) {
                        console.log("排序价格递减");
                    } else {
                        console.log("排序价格递增");
                    }
                }
            }

            $(this).addClass("active").parents("li").siblings().find("a").removeClass("active");
            myScroll.refresh();
        });

        //切换列表模式
        $("#listModal").click(function () {
            $(this).find("i").toggleClass("active");
            $(".product-list").toggleClass("simple-list");
            myScroll.refresh();
        });

        //清空输入
        $(".icon-no").click(function () {
            publicFuns.clearText($(".search-input"));
        });
    });
</script>
</body>
</html>